<!-- Created by henian.xu on 2018/11/12. -->

<template>
    <Page class="container">
        <template v-if="isSearch">
            <div class="search-bar">
                <div class="inner">
                    <i class="f-icon">&#xf105;</i> 搜索: {{ search }}
                    <Linker
                        to="/goods/list"
                        ssr
                        class="del">X
                    </Linker>
                </div>
            </div>
        </template>
        <template v-else>
            <ClassifyBar v-model="virtualCatId">
                <PropBar v-model="propModel"/>
            </ClassifyBar>
            <PropPicker
                :cat-id="virtualCatId"
                v-model="propModel"/>
        </template>
        <div class="sort-wrap ma-b">
            <div class="btn-group">
                <div class="btn btn-main">默认排序</div>
                <div class="btn">成交量</div>
            </div>
            <!--<checkbox v-model="shipping">包邮</checkbox>-->
        </div>

        <GoodsList
            item-width="20%"
            v-if="goodsList.length">
            <GoodsItem
                v-for="(item) in goodsList"
                :key="item.id"
                :data="item"/>
        </GoodsList>
        <div
            class="ta-c tc-g6"
            style="min-height: 450px"
            v-else>
            <i
                class="f-icon tc-g3 dp-b"
                style="font-size: 160px;">&#xf16b;</i>
            暂无数据
        </div>

        <div class="ta-r">
            <Paginate
                v-model="pagination.currentPage"
                :pager-count="5"
                :page-size="pagination.pageSize"
                :total-pages="pagination.totalPages"
                :total-rows="pagination.totalRows"/>
        </div>
    </Page>
</template>

<script>
export default {
    name: 'List',
    data() {
        return {
            propModel: {},
            shipping: false,
            pagination: {},
            goodsList: [],
        };
    },
    head() {
        return {
            title: '商品列表',
        };
    },
    computed: {
        search() {
            return this.$route.query.search || '';
        },
        isSearch() {
            return !!this.search;
        },
        brandIds() {
            return this.$route.query.brandIds || '';
        },
        propValue() {
            return this.$route.query.propValue || '';
        },
        virtualCatId: {
            get() {
                return +this.$route.query.catId || 0;
            },
            set(val) {
                this.$utils.Comm.gotoUrl({
                    query: {
                        catId: val,
                    },
                });
            },
        },
    },
    methods: {
        getGoodsList({ currentPage } = {}) {
            this.$axios
                .get('/rpc/buyer/gd/goods/goodsList', {
                    goodsName: this.search, //商品名称
                    virtualCatId: this.isSearch ? '' : this.virtualCatId, //前台类目ID
                    brandIds: this.brandIds, //品牌ids
                    propValue: this.propValue, //属性
                    orderByKey: 'insertTime', //排序key  insertTime默认排序
                    orderByType: 'asc', //排序类型 asc升序 desc降序
                    currentPage: currentPage || (this.pagination.currentPage ? this.pagination.currentPage + 1 : 1),
                    pageSize: 25, //页面大小
                })
                .then(json => {
                    const res = json.data;
                    this.goodsList = res.data;
                    this.pagination = res.pagination;
                });
        },
    },
    mounted() {
        this.getGoodsList();
    },
};
</script>

<style lang="scss" scoped>
@import '~/assets/style/_index.scss';
.sort-wrap {
    background-color: $gray3;
    padding: $padding;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.search-bar {
    margin: $margin 0;
    > .inner {
        display: inline-block;
        position: relative;
        background-color: $gray1;
        border: 1px solid $color-border;
        padding: $padding-small ($padding + 28) $padding-small $padding;
        > .del {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 28px;
            line-height: 28px;
            text-align: center;
            color: $color-red;
            cursor: pointer;
        }

        &:hover {
            border-color: $color-red;
            > .del {
                background-color: $color-red;
                color: #fff;
            }
        }
    }
}
</style>
